<template>
  <jke-modal :width="800" :visible.sync="jkeForm.visible" :title="jkeForm.title" :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen">
    <!--  -->
    <!-- <crumbs @goBack="goBack" :superiorMenu="['库存管理', '库存盘点']" :currentMenu="jkeForm.title"></crumbs> -->
    <div class="form-body" v-if="jkeForm.visible">
      <a-card :bordered="false" style="margin-top: 7px">
        <a-form-model :model="formData" ref="Curform" layout="vertical" :rules="rules">
          <a-form-model-item labelAlign="right"  label="表单名称：" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
            <div>{{ formData.fromName }}</div>
          </a-form-model-item>
          <a-form-model-item  labelAlign="right" label="编号前缀：" prop="codePrefix" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
            <a-input v-model="formData.codePrefix" :maxLength="5" />

          </a-form-model-item>
          <a-form-model-item labelAlign="right" label="提交时间：" prop="commitDate" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
            <a-select v-model="formData.commitDate" placeholder="请选择">
              <a-select-option v-for="item in dateList" :value="item.value" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item labelAlign="right" label="流水号位数：" prop="serialNumber" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
            <a-input-number style="width: 100%;" id="inputNumber" v-model="formData.serialNumber" :min="1" :max="8"
              placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item labelAlign="right" label="编号生成规则：" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
            <div>{{ generate }}</div>

          </a-form-model-item>
          <a-form-model-item labelAlign="right" label="编号预览：" :wrapper-col="{ span: 20 }" :label-col="{ span: 4 }">
            <div>{{ guiz }}</div>

          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>
    <div class="footer-submit form-footer">
      <a-button @click="closeBtn" class="submitBtn" style="margin-right: 10px"> 取消 </a-button>
      <a-button type="primary" :loading="loadingSubmit" class="submitBtn" @click="saveForm()"> 确定 </a-button>
    </div>
  </jke-modal>
</template>
<script>
import { FormTypes } from '@/utils/JEditableTableUtil'
import crumbs from '@/components/crumbs.vue'
import { datatype, formedit } from '@/api/goodsManagement'
import { getFileListByIds } from '@/api/api'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { API } from '@/api/requestFzs'
import { apiBaseUrlDownload } from '@/utils/request'
import { APILX } from '@/api/requestLx'
import { validateDuplicateValue } from '@/utils/util'
import { fourFloatNum, accMul, accDivMin } from '@/utils/util'
import Examine from '@/components/examine'
import moment from 'moment'
export default {
  name: 'customerForm', //新建客户
  data () {
    return {
      jkeForm: {
        title: '编辑编号规则',
        visible: false,
        fullscreen: false,
        // switchFullscreen: true,
      },

      loadingSubmit: false,
      dateList: [],
      formData: {
        codePrefix: '',
        commitDate: '',
        serialNumber: '',

      },
      rules: {
        codePrefix: [
          { required: true, message: '请输入编号前缀', trigger: 'change' },

        ],
        commitDate: [
          { required: true, message: '请输入提交时间', trigger: 'change' },

        ],
        serialNumber: [
          { required: true, message: '请输入流水号位数', trigger: 'change' },

        ],

      },
    }
  },

  components: {
    FileUpload,
    Examine,
    crumbs,
  },
  created () {
    this.getdata()
  },
  mounted () {
    let mainDiv = document.querySelector('.ant-layout-content') //ant-layout-content
    this.mainDivWidth = `${mainDiv.clientWidth}px`
  },
  computed: {
    generate () {
      let num = ''
      let maxnum = ''
      if (this.formData.serialNumber > 9) {
        this.formData.serialNumber = 9
      }

      for (let i = 0; i < this.formData.serialNumber; i++) {
        if (i > 0) {
          num += 0
        }
        maxnum += '9'
      }
      let datevalue = ''
      this.dateList.forEach((item) => {
        if (item.value === this.formData.commitDate) {
          datevalue = item.title
        }
      })
      return this.formData.codePrefix + datevalue + num + '1' + '-' + maxnum
    },
    guiz () {
      let num = ''
      if (this.formData.serialNumber > 9) {
        this.formData.serialNumber = 9
      }
      for (let i = 0; i < this.formData.serialNumber; i++) {
        if (i > 0) {
          num += 0
        }
      }
      let datevalue = ''
      this.dateList.forEach((item) => {
        if (item.value === this.formData.commitDate) {
          datevalue = item.value
        }
      })
      if (datevalue == "yyyyMMdd") {
        datevalue = 'yyyyMMDD'
      }
      return this.formData.codePrefix + moment(new Date()).format(datevalue) + num + '1'
    },
    formDisabled () {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
  },
  methods: {

    closeBtn () {
      this.jkeForm.visible = false
      // this.submitProcess()
    },


    // 分页
    onChangePage (current, pageSize) {
      this.getGoodsListPage.current = current
      if (this.queryId) {
        this.getEditUnAbleTable()
      } else {
        this.getGoodsList()
      }
    },
    onShowSizeChange (current, pageSize) {
      this.getGoodsListPage.pageSize = pageSize
      this.getGoodsListPage.current = current
      if (this.queryId) {
        this.getEditUnAbleTable()
      } else {
        this.getGoodsList()
      }
    },


    saveForm () {

      this.$refs.Curform.validate((valid) => {
        if (valid) {
          this.loadingSubmit = true
          let parm = {
            id: this.formData.id,
            codePrefix: this.formData.codePrefix,
            commitDate: this.formData.commitDate,
            serialNumber: this.formData.serialNumber,
          }
          formedit(parm).then(res => {
            if (res.code == 200) {
              this.loadingSubmit = false
              this.jkeForm.visible = false
              this.$parent.searchQuery()
              this.$antdMessage.success(res.message)

            } else {
              this.$antdMessage.error(res.message)
            }

          })
        }
      })

    },



    /* 获取编辑详情 */
    initForm (v) {
      this.jkeForm.visible = true
      // this.$store.commit('SET_CURRENT_PREFIX', '/jksaas-easyMake/easyMake')
      this.formData = JSON.parse(JSON.stringify(v))
      this.getdata()
    },
    getdata () {
      datatype().then((res => {

        if (res.code == 200) {
          console.log(res, 'res')
          this.dateList = res.result
        }
      }))
    },
    // 提交
    saveFormEd (newparam1, all) {
      // console.log(all, 'all')
      if (this.selectRowKeysEd.length !== 0) {
        const { error, values } = this.$refs.goodsTableEd.getValuesSync({ validate: true })
        let newparamEd = values.filter((item) => this.selectRowKeysEd.includes(item.id))
        //合并两个数组
        let newparam = newparam1.concat(newparamEd)
        // console.log(newparam, 'newparam')
        this.handleSubmit(newparam, all)
      } else {
        this.handleSubmit(newparam1, all)
      }
      // console.log(all, 'all2')
    },
    handleSubmit (tableValue, all) {
      this.form.validateFields((err, values) => {
        console.log(values, 'values form')
        if (!err) {
          this.submitTo(tableValue, values, all)
        }
      })
    },


    /* 面包屑返回 */
    goBack () {
      this.$emit('refresh')
      this.jkeForm.visible = false
    },


  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';

.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

// /deep/.ant-form-vertical {}

.form-body {
  height: calc(55vh - 94px);
  overflow-y: scroll;
}

.submitBtn {
  .flex(center, center);
  padding: 8px;
}

.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}

.pic-f {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 10px;

  .pic-r {
    flex: 1;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #444444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .subDiv {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.imgClass {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}

.my-input {
  padding: 4px 30px 4px 11px;
  border-radius: 3px;
  border: solid 1px #cdcdcd;
}

input::-webkit-input-placeholder {
  color: #cdcdcd;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #cdcdcd;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #cdcdcd;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #cdcdcd;
}
/deep/ .ant-card-body{
  height: 400px;
}
/deep/ .ant-form-item-label{
  text-align: right;
}
</style>
